<template>
	<view class="page_content header-bg">
		<!-- <view class=""></view> -->
		<view class="head_content">
			<CustomNavbar title="Settings"></CustomNavbar>
			<view class="content items">
				<!-- <view class="cell" @click="show = true">
					<text class="title">Phone number</text>
					<view class="flex">
						<text style="font-weight: 400; color: rgb(218, 218, 218, 0.5); font-size: 27rpx;">+{{userInfoStore.nation}} {{userInfoStore.phone}} </text><u-icon
							class="ml-17" name="arrow-right"></u-icon>
					</view>
				</view> -->
				<!-- <view class="cell" @click="jumpView('/pages/setting/password?t=0')">
					<text class="title">{{$t('c24')}}</text>
					<view class="flex">
						<u-icon class="ml-17" name="arrow-right"></u-icon>
					</view>
				</view> -->
			</view>

			<view class="content items">
				<view class="cell" @click="jumpView('/pages/setting/bank')">
					<text class="title">Bank card</text>
					<view class="flex">
						<u-icon class="ml-17" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="cell" @click="jumpView('/pages/home/update')">
					<text class="title">Check for updates</text>
					<view class="flex">
						<u-icon class="ml-17" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<u-popup :safe-area-inset-bottom="false"  bgColor="#484646" :round="10" :show="show" mode="center">
			<view class="phone_pop">
				<text class="pop_title">Change the bound phone number?</text>
				<text class="pop_body">The currently bound phone number is {{userInfoStore.phone}}</text>
			</view>
			<view class="pop_btns">
				<view class="pop_btn" @click="show=false">Close</view>
				<view class="pop_btn ok"  @click="toUpPhone">Confirm</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import CustomNavbarHome from '../../components/CustomNavbar-home.vue'
	export default {
		components: { CustomNavbarHome },
		data() {
			return {
				show: false,
				userInfoStore: { ...this.$store.state.user.userInfo } 
}
		},
		methods: {
			replace(str, val) {
				return str.replace('*', val)
			},
			toUpPhone () {
				this.show = false
				this.jumpView('/pages/setting/phone')
			}
		}
	}
</script>

<style>
	.pop_title {
		font-weight: 400;
		font-size: 31rpx;
		color: #FFFFFF;
	}
	.pop_body {
		margin-top: 24rpx;
		font-weight: 400;
		font-size: 27rpx;
		color: #8C8C8C;
		text-align: center;
	}
	.phone_pop {
		width: 617.31rpx;
		padding: 42rpx 0;
		display: flex;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #484646;	
		margin: 0;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	
	.pop_btns {
		width: 100%;
		display: flex;
		height: 88rpx;	
		background-color: #484646;
		border-radius:  0 0 20rpx 20rpx;
	}
	
	.pop_btns .pop_btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		color: #696969;
	}
	.pop_btns .pop_btn.ok {
		color: #FFFFFF;
	}
	.pop_btns .pop_btn:first-child::after{
		content: "";
		height: 100%;
		width: 1rpx;
		background-color: #8C8C8C;
		position: absolute;
		right: 0;
	}

	.content {
		width: 688rpx;
		margin: 0 auto;
		margin-top: 34rpx;
	}

	.items {
		color: white;
		background: rgba(255, 255, 255, .1);
		border-radius: 23rpx;
	}

	.items .cell {
		height: 92rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		position: relative;
		overflow: hidden;
	}

	.items .cell:first-child::after {
		content: " ";
		position: absolute;
		background-color: rgb(218, 218, 218, 0.4);
		bottom: 0;
		height: 1rpx;
		width: 90%;
	}

	.cell .title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 27rpx;
		color: #FFFFFF;
	}

	.color-white {
		color: white;
	}

	.cell:active {
		background: rgba(255, 255, 255, .1);
		overflow: hidden;
	}
</style>